<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!--
    <link rel="apple-touch-icon" href="images/icon.png"/>
-->
    <link rel="icon" type="image/png" href="images/icon.png"/>
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)"
          href="images/splash_iPad_portrait.png"/>
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)"
          href="images/splash_iPad_landscape.png"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Gomoku</title>
    <link rel="stylesheet" href="style/jquery.mobile-1.2.0.min.css"/>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="style/style.css"/>
    <script src="js/main.js" type="text/javascript"></script>
</head>
<body ontouchstart="">
<div class="fullscreen-wrapper" id="happy-outer"><img src="images/happy.png" class="happy-face screen-center"/></div>
<div class="fullscreen-wrapper" id="sad-outer"><img src="images/sad.png" class="sad-face screen-center"/></div>
<div data-role="page" data-theme="w" id="game-page" class="no-background">
    <div data-role="content" class="center no-padding">
        <div id="game-region">
            <header class="game-ult">Gomoku</header>
            <div id="game-info" class="game-ult ui-bar ui-bar-e"><span class="go black"></span> <span class="cont">Your turn.</span>
            </div>
            <div id="main-but-group" class="game-ult"><a href="#new-game" data-rel="dialog" data-role="button"
                                                         data-icon="grid">New Game</a> <a href="#" id="undo-button"
                                                                                          data-icon="back"
                                                                                          data-role="button">Undo</a>
            </div>
            <div id="other-but-group" class="game-ult"><a href="#help-page" id="help-button" data-icon="star"
                                                          data-role="button">About</a></div>
            <div class="go-board" data-enhance="false"></div>
            <table class="board" data-enhance="false">
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<div id="game-won" data-theme="e" data-role="dialog">
    <div data-role="header"><h4>You Win!</h4></div>
    <div data-role="content">
        <div id="win-content"> You have won the game! Play again?</div>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <button type="submit" class="back-to-game" data-theme="c">Back</button>
            </div>
            <div class="ui-block-b"><a href="#new-game" data-rel="dialog" data-role="button" data-icon="grid"> Start A
                New Game </a></div>
        </fieldset>
    </div>
</div>
<div id="new-game" data-theme="e" data-role="dialog" class="long-dialog">
    <div data-role="header"><h4>New Game</h4></div>
    <div data-role="content">
        <fieldset data-role="controlgroup" data-theme="e" id="mode-select">
            <legend>Play with</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="vshuman"/> <label for="radio-choice-1">Human</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="vscomputer"/> <label
                for="radio-choice-2">Computer</label></fieldset>
        <fieldset data-role="controlgroup" data-theme="e" id="color-select" class="vs-computer">
            <legend>Your Color</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="black" data-theme="a"/> <label
                for="radio-choice-2">Black</label> <input type="radio" name="radio-choice-1" id="radio-choice-1"
                                                          value="white" data-theme="c"/> <label for="radio-choice-1">White</label>
        </fieldset>
        <fieldset data-role="controlgroup" data-theme="e" id="level-select" class="vs-computer">
            <legend>Level Of Difficulty</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" value="novice"/> <label for="radio-choice-1">Novice</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" value="medium"/> <label for="radio-choice-2">Medium</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3" value="expert"/> <label for="radio-choice-3">Expert</label>
        </fieldset>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <button type="submit" class="back-to-game" data-theme="c">Back</button>
            </div>
            <div class="ui-block-b">
                <button type="submit" id="start-game" data-theme="b">Start</button>
            </div>
        </fieldset>
    </div>

</div>
<div data-role="dialog" data-theme="e" id="help-page">
    <div data-role="header"><h4>About</h4></div>
    <div data-role="content" class="thin-content"><p>I am Yujian and I made this game for fun. You can check out <a
            href="http://yjyao.com">my website</a> for my other lame projects, or find out more about me. You can also
        read a bit more about this game <a href="http://yjyao.com/2012/06/gomoku-in-html5.html">here</a>. Or, install
        this game in Chrome and/or post your comments <a
                href="https://chrome.google.com/webstore/detail/ngbpiahelilpgbnonpjfaoegaigopepa">here</a>.</p>
        <p>Also, have fun beating/get beaten by my AI!</p></div>
</div>
<!--<script type="text/javascript">-->
    <!--var _gaq = _gaq || [];-->
<!--_gaq.push(['_setAccount', 'UA-32333016-1']);-->
<!--_gaq.push(['_trackPageview']);-->
<!--(function () {-->
    <!--var ga = document.createElement('script');-->
    <!--ga.type = 'text/javascript';-->
    <!--ga.async = true;-->
    <!--ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';-->
    <!--var s = document.getElementsByTagName('script')[0];-->
    <!--s.parentNode.insertBefore(ga, s);-->
<!--})(); </script>-->
</body>
</html>
